<template>
  <div id="baiwan-money">
    <div class="table-list">
      <ol class="table-header">
        <li>币种</li>
        <li>持有量</li>
        <li>充/提币</li>
      </ol>
      <ul class="table-body">
        <li v-if="listData&&listData.value.length>0" v-for="(list,index) in listData.value" :key="index">
          <span>{{list.coinName}}</span>
          <span>{{list.amount}}</span>
          <span>
              <button class="charge" @click="handleChargemoney(list)">充币</button>
              <!--<button class="gray">提币</button>-->
              <button v-if="list.coinName==='ETH'" class="charge" @click="handleMentionmoney(list)">提币</button>
              <button v-else class="gray">提币</button>
            </span>
        </li>
        <p class="no-data" v-if="!listData||listData.value.length<1">暂无数据</p>
      </ul>
      <van-pagination
        v-if="listData.totalCount&&listData.totalCount>listData.pageSize"
        class="page_list"
        prev-text="<"
        next-text=">"
        v-model="listData.pageNum"
        :total-items="listData.totalCount"
        :items-per-page="listData.pageSize"
        @change="pageChange"
        force-ellipses
      />
    </div>
    <charge-dialog :visible="currentVisible" :changeData="currentData" @retrieveData="gitAccountList"></charge-dialog>
    <mention-dialog :visible="mentionVisible" :changeData="currentData" @retrieveData="gitAccountList"></mention-dialog>
  </div>
</template>

<script>
  import {Toast} from 'vant'
  import Chargedialog from './chargeDialog'
  import Mentiondialog from './mentionDialog'
  import Api from '@/axios'

  export default {
    name: 'baiwan-money',
    data() {
      return {
        currentVisible: false,
        mentionVisible: false,
        currentData: null,
        listData: {
          totalCount: null, // 总条数
          pageNum: 1, // 当前显示页号
          pageSize: 10, // 每页显示数据条数
          value: []
        }
      }
    },
    components: {
      'charge-dialog': Chargedialog,
      'mention-dialog': Mentiondialog
    },
    methods: {
      gitAccountList() {
        let params = {
          pageNum: this.listData.pageNum,
          pageSize: this.listData.pageSize
        }
        Api.getAccount(params).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.listData.totalCount = result.data.totalCount
            this.listData.value = result.data
          } else {
            Toast(result.message)
          }
        })
      },
      pageChange(page) {
        this.listData.pageNum = page
        this.gitAccountList()
      },
      handleChargemoney(data) {
        this.currentData = data
        this.currentVisible = !this.currentVisible
      },
      handleMentionmoney(data) {
        this.currentData = data
        this.mentionVisible = !this.mentionVisible
      }
    },
    mounted() {
      this.gitAccountList()
    }
  }
</script>

<style lang="less" scoped>
  #baiwan-money {
    width: 100%;
    height: auto;
    display: block;
    color: #FFFFFF;
    padding: 0 24px;
    box-sizing: border-box;
    .gray{
      background: gray;
    }
  }
</style>
